<template>
	<view class="main">
		<!-- header -->
		<view class="header">
			<view class="header-left">
				<image class="header-left-image" :src="rawData.avatarUrl" mode=""></image>
				<view class="header-left-login">
					<view v-if="hasLogin" class="header-left-login-title">
						{{userInfo.name ||''}}
					</view>
					<button v-else @getuserinfo="getphonenumber" open-type="getUserInfo" class="header-left-login-title" plain="true">点击登录</button>
					<view v-if="hasLogin==false" class="header-left-login-desc">
						登录后免费领积分
					</view>
				</view>
				<button @getuserinfo="getphonenumber" open-type="getUserInfo" plain="true" class="tip-login-action-btn"></button>
			</view>
			<view class="free-score">
				<image class="free-score-img" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/jifen.png" mode=""></image>
				<view class="free-score-text">
					免费领积分
				</view>
			</view>
		</view>
		<!-- list -->
		<view class="list-box">
			<adCell icon='https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/mine/mineinfo.png' text="我的信息" @click="myInfo"></adCell>
			<adCell icon='https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/mine/shouji.png' showBottomLine text="绑定手机" :detail="userInfo.phone" @click="bindPhone"></adCell>
			<adCell icon='https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/mine/kefu.png' text="客服热线" showArrow="false" :detail="phoneNum" @click="makePhoneCall"></adCell>
		</view>
	    <button v-if="hasLogin===false" @getuserinfo="getuserinfo" plain="true" open-type="getUserInfo" class="main-mask" ></button>
	</view>
</template>

<script>
	import adCell from '@/components/andy-adcell/andy-adcell.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			adCell
		},
		data() {
			return {
				rawData: {
					avatarUrl: 'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/mine/avatar.png'
				},
				phoneNum: '400-84750386',
			}
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
		},
		onShow() {
			this.silentLogin(data => {
				this.setCode(data);
			});
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			getuserinfo(e) {
				this.silentLogin(params => {
					this.setCode(params);
				})
			},
			setCode(params) {
				this.$request.get({
					url: 'setWXCode',
					data: params,
				}).then(info=>{
					this.saveUserInfo(info);
				},res=>{});
			},
			silentLogin(cb) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								that.rawData = JSON.parse(infoRes.rawData);
								if (cb) {
									const params = {
										...JSON.parse(infoRes.rawData),
										code: loginRes.code
									}
									cb(params);
								}
							}
						});
					}
				});
			},
			myInfo() {
				uni.navigateTo({
					url: "/pagesB/complete-info/complete-info"
				})
				
			},
			bindPhone() {
				uni.navigateTo({
					url: "/pagesB/bind-phone/bind-phone"
				})
			},
			
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNum
				});
			},
			getphonenumber(e) {
				this.silentLogin(params => {
					this.setCode(params);
				})
			}
		}
	}
</script>

<style>
	.list-box {
		background: #FFFFFF;
		box-shadow: 0 6upx 16upx 0 rgba(56, 73, 184, 0.02);
	}

	.free-score {
		width: 226upx;
		height: 82upx;
		border-top-left-radius: 41upx;
		border-bottom-left-radius: 41upx;
		background-color: #FFECE8;

		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.free-score-img {
		width: 48upx;
		height: 48upx;
		margin-left: 18upx;
	}

	.free-score-text {
		margin-left: 10upx;
		font-size: 26upx;
		color: #48526B;
	}

	.main {
		background-color: #F8F8F8;
		position: relative;
	}
	
	.main-mask{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color:#00000000;
		border: none !important;
		
	}

	.header-left-image {
		width: 128upx;
		height: 128upx;
		border-radius: 50%;
		margin-left: 30upx;
	}

	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 248upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}

	.header-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}
	
	.tip-login-action-btn {
		border: none !important;
		/* background-color: #2C405A; */
		position: absolute;
		left: 0upx;
		right: 0upx;
		top: 0upx;
		bottom: 0upx;
		/* width: 92upx;
		height: 92upx; */
	}

	.header-left-login {
		margin-left: 28upx;
	}

	.header-left-login>button {
		border: none !important;
	}

	.header-left-login-title {
		color: #48526B;
		font-size: 32upx;
	}

	.header-left-login-desc {
		color: #999999;
		font-size: 26upx;
		padding-left: 36upx;
		box-sizing: border-box;
	}
</style>
